|
[1]
[2]
[3]
[4]
[5]
[6]
Unordered Lists
The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is -- a list of items, each one preceded by a "bullet" (a distinctive character; typically, a small black circle).
The list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item." <LI> has a corresponding </LI>, but this closing tag is not required to end the list item (although you could use one if you really wanted to). You can use as many list items as you like, up to your browser's built-in maximum, if any.
Here's the markup for a simple list:
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
If you loaded an HTML page containing the markup above, you would see the days of the week, each one preceded by a "bullet." To wit:
Monday
Tuesday
Wednesday
Thursday
Friday
Almost anything can be put into a list item -- line breaks, entire paragraphs, images, links, or even other lists. For example:
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<UL>
<LI>6am - 9am
<LI>9am - 12n
<LI>12n - 3pm
<LI>3pm - 6pm
</UL>
<LI>Thursday
<LI>Friday
</UL>
In the above case, under "Wednesday" in the 'outer list,' you would find another unordered list (the three-hour blocks of time), which is referred to as a nested list. (In the markup above, I have indented the nested list for purposes of clarity; this is not required for the lists to work. Remember what I've said about whitespace...) Here's how it looks:
Monday
Tuesday
Wednesday
6am - 9am
9am - 12n
12n - 3pm
3pm - 6pm
Thursday
Friday
Now here's a page with a lot of nested lists.
In theory, you could probably nest lists indefinitely, but a bit of restraint is called for. Don't nest them too deeply unless you absolutely have to, if for no other reason than aesthetics. Nesting lists too far can look pretty bad.
Ordered Lists
On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using <UL> and </UL>, an ordered list is contained within the tags <OL> and </OL>. Ordered lists are based on list items, just as unordered lists are.
However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example:
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this:
Monday
Tuesday
Wednesday
Thursday
Friday
Ordered lists are as nestable as unordered lists, and you can nest unordered lists in ordered lists, as well as the other way around. This can get pretty complicated, but sometimes it's what you need.
Definition Lists
As you might expect, definition lists begin and end with the tags <DL> and </DL>. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs.
Here's the markup for a basic definition list:
<DL>
<DT>Do
<DD>a deer, a female deer
<DT>Re
<DD>a drop of golden sun
<DT>Mi
<DD>a name I call myself
<DT>Fa
<DD>a long, long way to run
<DT>Sol
<DD>a needle pulling thread
<DT>La
<DD>a note to follow so
<DT>Ti
<DD>a drink with jam and bread
</DL>
A good way to think of it is that <DT> stands for "Definition-list Term" and <DD> stands for "Definition-list Definition." When the above list is displayed, it arranges the elements such that each term is associated with the corresponding definition. The exact arrangement of elements may vary from browser to browser. Here's how the above markup comes out:
Do
a deer, a female deer
Re
a drop of golden sun
Mi
a name I call myself
Fa
a long, long way to run
Sol
a needle pulling thread
La
a note to follow so
Ti
a drink with jam and bread
Similar to ordered and unordered lists, definition lists can be arbitrarily long. Almost any structure can be placed in a <DD> tag, but putting large-scale structures (such as paragraphs, headings, and other lists) in the <DT> tag is not legal, according to the HTML Specification 2.0. You can leave out one part of a DT-DD pair, but this is not recommended.
Definition lists are perfect for creating glossaries. For example, the Beginner's Web Glossary on our server is simply one relatively long definition list.
There is one attribute to the <DL> tag, which is compact. This causes the display of the definition list to be compacted. What does that mean? It means that the information contained in the <DD> will be displayed on the same line as the <DT> term, if possible. (By the way, Microsoft's Internet Explorer does not support this attribute, so the examples in this section aren't going to work if you're using Explorer.) The markup would start out:
<DL compact>
<DT>Do
<DD>a deer, a female deer
<DT>Re
<DD>a drop of golden sun
.....
...and the entire compacted list would look a bit different than the first definition-list example. Thus:
Do
a deer, a female deer
Re
a drop of golden sun
Mi
a name I call myself
Fa
a long, long way to run
Sol
a needle pulling thread
La
a note to follow so
Ti
a drink with jam and bread
Pretty neat, eh? One word of warning, though: this will only work when your terms are short enough to allow the definition to appear on the same line. If the term is too long, the definition will start on the next line, just as they would in an uncompacted list.
[1]
[2]
[3]
[4]
[5]
[6]
|
